<template>
  <div class="filter d-flex align-xl-baseline flex-item">
    <v-icon 
      style="height: 40px"
      class="mr-3"
    >
      mdi-filter-outline 
    </v-icon>
    <template v-for="({type, label, items}, index) in data">
      <v-text-field 
        v-if="type==='text-field'" 
        :key="index" 
        outlined
        :label="label"
        dense
        class="ml-2 mr-2"
      />
      <v-select
        v-if="type==='select'" 
        :key="index" 
        :items="items"
        :label="label"
        outlined
        dense
        class="ml-2 mr-2"
      />
    </template>

    <v-btn
      depressed
      :loading="loading"
      :disabled="loading"
      color="primary"
      class="ml-auto"
      @click="handleSearch"
    >
      Search
    </v-btn>
  </div>
</template>

<script lang="ts">
// interface FilterItem{
//   type: string,
//   data: any
// }

export default {
  props: {
    data: {
      type: Array,
      default: () => {}
    }
  },
  data () {
    return {
      loading: false
    }
  },
  mounted () {
    console.log(this.data)
  },
  methods: {
    handleSearch () {
      this.loading = true
      this.$emit('search')
      setTimeout(() => {
        this.loading = false
      },500)
    }
  }
}
</script>